<template>
	<view class="editer-wrap">
		<u-navbar
			backIconColor="#FFFFFF"
			:background="{background: 'linear-gradient(90deg,#615CED,#8286F2)'}"
			:border-bottom="false"
			title="修改评语"
			titleColor="#FFFFFF"
			height="88">
		</u-navbar>

		<view class="input-item">
			<view class="input-title">评语类别</view>
			<input
				class="input-text"
				v-model="commType"
				type="text"
				placeholder="请输入评语类别"
				placeholder-class="input-text-pl"
			/>
		</view>

		<view class="commslist" v-for="(item,index) in comms" :key="index">
			<view class="pynr">评语内容-{{index+1}}</view>
			<textarea
				class="textarea1"
				v-model="item.content"
				placeholder-style="color: #999999;font-size: 28rpx;"
				placeholder="请输入评语内容"
				maxlength="500"
				:autoHeight="true">
			</textarea>
		</view>

		<view class="addbtn" @click="addComm">
			<image src="../../static/ic_builder_comment.png" mode="scaleToFill"></image>
			<view class="addtxt">+ 添加评语</view>
		</view>

		<view class="savebtn" @click="submit">确定</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			commType: '',
			comms: [
				{
					content: '',
					id: 0
				}
			]
		}
	},
	onLoad(ops) {
		this.id = ops?.id || '';
		this.getDetails();
	},
	methods: {
		addComm() {
			this.comms.push({
				content: '',
				id: 0
			});
		},
		// 获取评论详情
		getDetails() {
			let that = this;
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.commentDetails}`,
				method: 'POST',
				timeout: 30000,
				data: {
					id: that.id
				},
				header: {
					'authtoken': that.$auth.token(that.$api.commentDetails)
				},
				success(res) {
					if (res.data?.code == 1) {
						that.commType = res?.data?.data?.category;
						that.comms = res?.data.data?.content;
					} else {
						uni.showToast({
							title: res.data?.msg || '获取数据失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				}
			})
		},
		submit() {
			let that = this;
			let body = {
				id: that.id,
				category: that.commType,
				content: that.comms
			}
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.editComment}`,
				method: 'POST',
				timeout: 30000,
				data: body,
				header: {
					'authtoken': that.$auth.token(that.$api.editComment)
				},
				success(res) {
					if (res.data?.code == 1) {
						uni.showToast({
							title: res.data?.msg || '修改成功',
							icon: 'none',
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 300);
					} else {
						uni.showToast({
							title: res.data?.msg || '修改失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '修改失败',
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F8F8F8;
}
.editer-wrap{
	padding-bottom: 190rpx;
	.input-item {
		width: 100%;
		height: 108rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		.input-title {
			height: 30rpx;
			text-align: left;
			padding-left: 39rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			line-height: 30rpx;
			padding: 0 40rpx 0 40rpx;
		}
		.input-text {
			flex: 1;
			height: 100%;
			text-align: left;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			padding-left: 10rpx;
		}
		.input-text-pl {
			font-size: 28rpx;
			color: #C5C5C5;
			line-height: 28rpx;
		}
	}
	.commslist{
		width: 100%;
		background-color: #FFFFFF;
		padding: 40rpx 30rpx 40rpx 30rpx;
		margin-top: 2rpx;
		.pynr{
			font-size: 30rpx;
			color: #333333;
			line-height: 30rpx;
		}
		.textarea1{
			color: #333333;
			font-size: 28rpx;
			margin-top: 30rpx;
			width: 100%;
			max-height: 110rpx;
			overflow: hidden;
			overflow-y: scroll;
		}
	}
	.addbtn{
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		margin-top: 2rpx;
		position: relative;
		image{
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			left: 60rpx;
		}
		.addtxt{
			font-size: 36rpx;
			line-height: 36rpx;
			color: #999999;
		}
	}
	.savebtn{
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(0deg, #615CED, #8286F2);
		box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(119, 163, 255, 0.28);
		border-radius: 45rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		position: fixed;
		bottom: 50rpx;
		left: 75rpx;
	}
}
</style>
